import React, { useEffect, useState } from 'react';
import { Form, Input, InputNumber, Select, DatePicker, Button, message } from 'antd';
import moment from 'moment';
import ExpenseService from '../../services/ExpenseService';

const { Option } = Select;

const AddExpense = ({ onSuccess, isEditMode = false, record = null }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 费用类型选项
  const expenseTypes = [
    '办公费',
    '差旅费'
  ];

  // 报销状态选项
  const expenseStates = [
    '未报销',
    '已报销',
  ];

  // 初始化表单值（编辑模式下）
   useEffect(() => {
    if (isEditMode && record) {
      form.setFieldsValue({
        expenseName: record.expenseName,
        relatedCustomer: record.relatedCustomer,
        expensePrice: record.expensePrice,
        expenseType: record.expenseType,
        expenseDate: moment(record.expenseDate),
        expenseState: record.expenseState,
        supportName: record.supportName
      });
    } else {
      form.resetFields();
    }
  }, [isEditMode, record, form]);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      
      // 准备提交数据
      const submitData = {
        ...values,
        expenseDate: values.expenseDate.format('YYYY-MM-DD')
      };

      if (isEditMode) {
        // 编辑模式 - 调用更新接口
        await ExpenseService.updateExpense(record.id, submitData);
        message.success('费用更新成功');
      } else {
        // 添加模式 - 调用创建接口
        await ExpenseService.addExpense(submitData);
        message.success('费用添加成功');
      }
      
      onSuccess(); // 通知父组件操作成功
    } catch (error) {
      message.error(error.response?.data?.message || 
                   (isEditMode ? '更新失败' : '添加失败'));
    } finally {
      setLoading(false);
    }
  };


  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
    >
      <Form.Item
        name="expenseName"
        label="费用名称"
        rules={[{ required: true, message: '请输入费用名称' }]}
      >
        <Input placeholder="请输入费用名称" />
      </Form.Item>

      <Form.Item
        name="relatedCustomer"
        label="关联客户"
        rules={[{ required: true, message: '请输入关联客户' }]}
      >
        <Input placeholder="请输入关联客户" />
      </Form.Item>

      <Form.Item
        name="expensePrice"
        label="费用金额"
        rules={[{ required: true, message: '请输入费用金额' }]}
      >
        <InputNumber 
          style={{ width: '100%' }} 
          min={0} 
          precision={2} 
          placeholder="请输入费用金额" 
        />
      </Form.Item>

      <Form.Item
        name="expenseType"
        label="费用类型"
        rules={[{ required: true, message: '请选择费用类型' }]}
      >
        <Select placeholder="请选择费用类型">
          {expenseTypes.map(type => (
            <Option key={type} value={type}>{type}</Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        name="expenseDate"
        label="发生时间"
        rules={[{ required: true, message: '请选择发生时间' }]}
      >
        <DatePicker 
          style={{ width: '100%' }} 
          disabledDate={(current) => current && current > moment().endOf('day')} 
        />
      </Form.Item>

      <Form.Item
        name="expenseState"
        label="报销状态"
        rules={[{ required: true, message: '请选择报销状态' }]}
      >
        <Select placeholder="请选择报销状态">
          {expenseStates.map(state => (
            <Option key={state} value={state}>{state}</Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        name="supportName"
        label="负责人员"
        rules={[{ required: true, message: '请输入负责人员' }]}
      >
        <Input placeholder="请输入负责人员" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading} block>
          {isEditMode ? '更新' : '提交'}
        </Button>
      </Form.Item>
    </Form>
  );
};

export default AddExpense;